'use client';

import Link from 'next/link';
import { 
  MapPinIcon,
  PhoneIcon,
  EnvelopeIcon,
  GlobeAltIcon
} from '@heroicons/react/24/outline';

const footerLinks = {
  quickLinks: [
    { label: '关于我们', href: '/about' },
    { label: '团队成员', href: '/members' },
    { label: '研究项目', href: '/projects' },
    { label: '新闻动态', href: '/news' },
  ],
  research: [
    { label: '移动机器人', href: '/research/mobile-robots' },
    { label: '机械臂', href: '/research/robotic-arms' },
    { label: '人工智能', href: '/research/ai' },
    { label: '计算机视觉', href: '/research/computer-vision' },
  ],
  resources: [
    { label: '学术论文', href: '/publications' },
    { label: '技术报告', href: '/reports' },
    { label: '开源项目', href: '/open-source' },
    { label: '合作机会', href: '/collaboration' },
  ],
  contact: [
    {
      icon: MapPinIcon,
      label: '某某大学某某学院某某楼某某室',
      href: '#'
    },
    {
      icon: PhoneIcon,
      label: '+86-10-12345678',
      href: 'tel:+86-10-12345678'
    },
    {
      icon: EnvelopeIcon,
      label: 'contact@roboticslab.com',
      href: 'mailto:contact@roboticslab.com'
    },
    {
      icon: GlobeAltIcon,
      label: 'www.roboticslab.com',
      href: 'https://www.roboticslab.com'
    },
  ]
};

const socialLinks = [
  { 
    name: '微信公众号',
    icon: (
      <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
        <path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.456c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.314-8.596-6.314zM5.785 5.991c.642 0 1.162.529 1.162 1.18 0 .659-.52 1.188-1.162 1.188-.642 0-1.162-.529-1.162-1.188 0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18 0 .659-.52 1.188-1.162 1.188-.642 0-1.162-.529-1.162-1.188 0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229 2.453 0 4.731-.984 6.314-2.638.821-.857 1.4-1.851 1.4-2.985 0-2.015-1.717-3.612-3.732-3.612z"/>
      </svg>
    ),
    href: '#'
  },
  {
    name: '微博',
    icon: (
      <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
        <path d="M9.31 8.17c-2.63-.51-4.85.27-5.37 1.75-.52 1.48.42 3.25 3.05 3.76 2.63.51 4.85-.27 5.37-1.75.52-1.48-.42-3.25-3.05-3.76zM15.72 7.62c-.15-.04-.26-.08-.18-.31.17-.48.19-1.06.02-1.48-.41-.98-1.52-1.05-2.8-.23 0 0-.4.27-.3-.22.21-.96-.03-1.79-.67-2.01-1.41-.49-3.42.56-4.94 2.36C5.36 7.47 4.64 9.07 4.64 10.5c0 2.9 3.65 4.66 7.21 4.66 4.68 0 7.79-2.75 7.79-4.94 0-1.33-1.1-2.08-3.92-2.6z"/>
      </svg>
    ),
    href: '#'
  },
  {
    name: 'GitHub',
    icon: (
      <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/>
      </svg>
    ),
    href: '#'
  },
];

export default function Footer() {
  return (
    <footer className="bg-gray-900 text-white">
      <div className="container mx-auto px-4 py-12">
        {/* Main Footer Content */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {/* Logo and Description */}
          <div className="lg:col-span-1">
            <div className="flex items-center space-x-3 mb-4">
              <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
                <span className="text-white font-bold text-lg">R</span>
              </div>
              <div>
                <h3 className="text-lg font-bold heading-font">机器人创新实验室</h3>
                <p className="text-sm text-gray-400">Robotics Innovation Lab</p>
              </div>
            </div>
            <p className="text-gray-300 text-sm mb-6 leading-relaxed">
              致力于机器人技术研发与创新，培养优秀的机器人工程师，推动科技进步。
            </p>
            
            {/* Social Links */}
            <div className="flex space-x-4">
              {socialLinks.map((social, index) => (
                <a
                  key={index}
                  href={social.href}
                  className="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center text-gray-400 hover:text-white hover:bg-blue-600 transition-all duration-200"
                  title={social.name}
                >
                  {social.icon}
                </a>
              ))}
            </div>
          </div>

          {/* Quick Links */}
          <div>
            <h4 className="text-lg font-semibold mb-4">快速链接</h4>
            <ul className="space-y-2">
              {footerLinks.quickLinks.map((link, index) => (
                <li key={index}>
                  <Link
                    href={link.href}
                    className="text-gray-300 hover:text-blue-400 transition-colors duration-200 text-sm"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Research Areas */}
          <div>
            <h4 className="text-lg font-semibold mb-4">研究领域</h4>
            <ul className="space-y-2">
              {footerLinks.research.map((link, index) => (
                <li key={index}>
                  <Link
                    href={link.href}
                    className="text-gray-300 hover:text-blue-400 transition-colors duration-200 text-sm"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Contact Info */}
          <div>
            <h4 className="text-lg font-semibold mb-4">联系我们</h4>
            <ul className="space-y-3">
              {footerLinks.contact.map((contact, index) => (
                <li key={index}>
                  <a
                    href={contact.href}
                    className="flex items-start space-x-2 text-gray-300 hover:text-blue-400 transition-colors duration-200 text-sm"
                  >
                    <contact.icon className="w-4 h-4 mt-0.5 flex-shrink-0" />
                    <span className="leading-relaxed">{contact.label}</span>
                  </a>
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* Bottom Section */}
        <div className="border-t border-gray-800 mt-12 pt-8">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <div className="text-sm text-gray-400 mb-4 md:mb-0">
              © 2024 机器人创新实验室. 保留所有权利.
            </div>
            <div className="flex space-x-6 text-sm">
              <Link href="/privacy" className="text-gray-400 hover:text-blue-400 transition-colors">
                隐私政策
              </Link>
              <Link href="/terms" className="text-gray-400 hover:text-blue-400 transition-colors">
                使用条款
              </Link>
              <Link href="/sitemap" className="text-gray-400 hover:text-blue-400 transition-colors">
                网站地图
              </Link>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}